import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { ThemeManager } from '@/config/theme'

export const useThemeStore = defineStore('theme', () => {
  const themeManager = ThemeManager.getInstance()
  
  // 状态
  const currentTheme = ref<'light' | 'dark'>(themeManager.getCurrentTheme())
  
  // 计算属性
  const isDark = computed(() => currentTheme.value === 'dark')
  const themeConfig = computed(() => themeManager.getThemeConfig())
  
  // 操作
  const toggleTheme = () => {
    const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
  }
  
  const setTheme = (theme: 'light' | 'dark') => {
    currentTheme.value = theme
    themeManager.setTheme(theme)
  }
  
  const initTheme = () => {
    themeManager.initTheme()
    currentTheme.value = themeManager.getCurrentTheme()
  }
  
  return {
    currentTheme,
    isDark,
    themeConfig,
    toggleTheme,
    setTheme,
    initTheme,
  }
})